
<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-15 12:23:32
 * @LastEditTime: 2023-07-19 14:40:32
 * @FilePath: \myblog\src\mviews\components\BaseForm.vue
-->
<template>
  <van-form ref="form">
    <van-field class="blogm-form--input" v-for="item in formData" :type="item.type" :key="item.query" v-model="form[item['query']]" :readonly="item['query'] === 'username' && type === 'userInfo'" :name="item.query" :label="item.label" :placeholder="item.placeholder" :rules="validates[item['query']] | formatRuleTrigger" />
  </van-form>
</template>

<script>
import _padStart from 'lodash/padStart'
import _capitalize from 'lodash/capitalize'
import VALIDATE_DATA from '@/config/validate.config'
import FORM_DATA from '@/config/form.config' 
export default {
  components:{},
  data(){
    return {
      form: {},
      validates: VALIDATE_DATA
    }
  },
  props: {
    type: {
      type: String
    }
  },
created(){
  if (this.type === 'userInfo')
  {
    this.form = this.formUserInfo;
  }
},
mounted(){},
watch:{
  type(newType) {
    this.initForm();
    if (newType === 'userInfo')
    {
      this.form = this.formUserInfo;
    }
  }
},
computed:{
  formData() {
    return FORM_DATA[this.type].filter(item => {
      return item.query !== 'avatar'
    })
  },
  formUserInfo() {
    return Object.fromEntries(Object.entries(this.$store.getters.userInfo).
    filter(([key])=> {
      return FORM_DATA['userInfo'].find(item => {
        return key == item['query']
      })
    }))
  }
},
filters: {
  formatRuleTrigger(rules) {
    return rules?.map(item => {
      item.trigger = _padStart(_capitalize(item.trigger), 6, 'on');
      return item
    })
  },
},
methods:{
  initForm() {
    //重置表单字段
    this.form = {};
    this.$refs['form'].resetValidation();
  },
},
}
</script>
<style lang="scss" scoped>
</style>